import { toast } from "./toast.js";
import {
  getWebsites,
  addWebsite,
  removeWebsite,
  getUnStoredWebsites,
} from "../scripts/storage.js";
const isExtension = chrome.tabs ? true : false;
const textarea = document.querySelector("#input_site_info");
const edtContainer = document.querySelector("#edt_container");
async function getWeb() {
  let web = {};
  try {
    web = await JSON.parse(textarea.value);
  } catch (error) {}
  return web;
}
function initInputSiteInfo() {
  //copy
  document.querySelector("#btn_copy").onclick = async () => {
    await navigator.clipboard.writeText(textarea.value);
    toast("copied", 1000);
  };
  //save
  document.querySelector("#btn_save").onclick = async () => {
    let web = await getWeb();
    if (await addWebsite(web)) {
      toast("saved", 1000);
    } else {
      toast("already saved", 1000, "red");
    }
    refreshWebSites();
  };
  //delete
  document.querySelector("#btn_del").onclick = async () => {
    let web = await getWeb();
    removeWebsite(web);
    toast("deleted", 1000);
    refreshWebSites();
  };
  //setting
  document.querySelector("#settings").onclick = () => {
    if (edtContainer.style.display == "none") {
      edtContainer.style.display = "flex";
    } else {
      edtContainer.style.display = "none";
    }
  };
  if (isExtension) {
    edtContainer.style.display = "flex";
    document.querySelector("#btn_save").style.display = "none";
    document.querySelector("#btn_del").style.display = "none";
    document.querySelector("#settings").style.display = "none";
  } else {
    document.querySelector("#btn_copy").style.display = "none";
  }
}

function showSiteInfo() {
  chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
    let tab0 = tabs[0];
    console.log(tab0.url);
    let url = decodeURI(tab0.url); // 解码Base64字符串
    let info = {
      icon: tab0.favIconUrl,
      title: tab0.title,
      url: url,
    };
    let text = JSON.stringify(info);
    textarea.value = text;
    initInputSiteInfo();
  });
}
const colorValues = [
  "#FF0000",
  "#00FF00",
  "#0000FF",
  "#FF00FF",
  "#00FFFF",
  "#800000",
  "#008000",
  "#000080",
  "#808000",
  "#800080",
  "#008080",
  "#C0C0C0",
  "#808080",
  "#FFA500",
  "#FFC0CB",
  "#800000",
  "#FFD700",
  "#4B0082",
  "#7CFC00",
];
async function refreshWebSites() {
  let list = document.querySelector("#web_list");
  list.innerHTML = "";
  if (chrome.tabs) {
    return;
  }
  let webSites = await getWebsites();
  let tip = document.querySelector(".tip");

  let newWebSites = getUnStoredWebsites();
  tip.onclick = () => {
    console.log(JSON.stringify(newWebSites));
  };

  tip.textContent = "" + newWebSites.length;
  if (newWebSites.length == 0) {
    tip.style.display = "none";
  } else {
    tip.style.display = "block";
  }
  var color = "";
  webSites.forEach((webSite, index, array) => {
    color = colorValues[index % colorValues.length];
    list.innerHTML += `<li><a href='${webSite.url}' target='_blank' style='background-color:${color}'><img class='webIcon' src='${webSite.icon}'><span class='text-label'>${webSite.title}</span></a></li>`;
  });
}

refreshWebSites();
if (isExtension) {
  document.body.style.width = "500px";
  showSiteInfo();
} else {
  initInputSiteInfo();
}
